<template>
  <el-dialog ref="content" :visible.sync="showDialog" :before-close="check" title="关联账号详情" width="55%" @open="openDialog">
    <el-table :data="newList" border style="width: 100%">
      <el-table-column label="业务平台账号">
        <template slot-scope="scope">
          {{ scope.row.userId }}
        </template>
      </el-table-column>
      <el-table-column label="所属业务平台">
        <template slot-scope="scope">
          {{ scope.row.platName }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            round
            plain
            @click="cancelConnect(scope.row.userCenterId, scope.row.userId, scope.row.platformId)"
          >
            取消关联
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
import secret from '@/utils/secret'
import { newCancelConnect } from '@/api/search.js'
import { newConnect } from '@/api/search.js'
// import { watch } from '@/api/liantong'
// import { mapGetters } from 'vuex'
export default {
  name: 'WatchInfo',
  props: {
    // 遮罩
    connectVal: {
      type: Boolean,
      default: false
    },
    dataVal: {
      type: Object,
      default: () => {}
    },
    platFormarr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: false,
      newList: []
    }
  },
  watch: {
    connectVal(newVal) {
      // console.log(newVal)
      this.showDialog = newVal
      if (newVal) {
        this.getUser(this.dataVal.userCenterId)
      }
      // console.log(this.dataVal.userCenterId)
      /* this.showDialog = newVal
      if (!this.$route.meta.platformId) {
        if (!this.plat) {
          if (!this.id) {
            this.getUser(this.idd, this.platformId)
          } else {
            this.getUser(this.id, this.platformId)
          }
        } else {
          this.getUser(this.id, this.plat)
        }
      } else {
        if (!this.id) {
          this.getUser(this.idd, this.platIdd)
        } else {
          this.getUser(this.id, this.platformId)
        }
      } */
    }
    // id(newVal) {
    //   // console.log(newVal)
    //   // 判断是分组还是查询
    //   if (!this.$route.meta.platformId) {
    //     if (!this.plat) {
    //       this.getUser(newVal, this.platformId)
    //     } else {
    //       this.getUser(newVal, this.plat)
    //     }
    //   }
    //   else {
    //     this.getUser(newVal, this.$route.meta.platformId)
    //   }
    // },
    // idd(newVal) {
    //   if (!this.$route.meta.platformId) {
    //     this.getUser(newVal, this.platIds)
    //   } else {
    //     this.getUser(newVal, this.$route.meta.platformId)
    //   }
    // }
  },
  mounted() {
  },
  methods: {
    cancelConnect(userCenterId, userId, platformId) {
      var centerId = this.dataVal.userCenterId
      this.$confirm('确定要取消关联吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          userCenterId: centerId,
          userId: userId,
          platformId: platformId
        }
        console.log(data)
        newCancelConnect(secret.Encrypt(data)).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '取消成功'
            })
            this.getUser()
          }
        })
      })
    },
    // 滚动条
    openDialog() {
      // console.log(this.$refs.content)
      // this.$nextTick(() => { // 图片列表栏始终左对齐
      //   // this.$refs.content.$el.scrollTop(document.body.scrollHeight, 0)
      //   // this.$refs.content.$el.document.documentElement = 0
      // })
    },
    remove(mac) {
      this.$confirm('确定要移除绑定吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '移除成功'
        })
      })
    },
    // 父子组件回调
    check() {
      this.showDialog = false
      this.$emit('closeDialog')
    },
    clickss(e) {
      e.scrollTop = 0
    },
    // 请求列表
    getUser(id) {
      const res = {
        userCenterId: this.dataVal.userCenterId
      }
      console.log('请求参数')
      console.log(res)
      newConnect(secret.Encrypt(res)).then(response => {
        var data = response.data.list
        if (Array.isArray(data) && data.length > 0) {
          this.platFormarr.forEach(item => {
            data.forEach(val => {
              if (val.platformId === item.typeId) {
                val.platName = item.typeName
              }
            })
          })
        }
        console.log('返回数据')
        console.log(data)
        this.newList = data
      })
    }
  }
}
</script>
<style>
.el-dialog {
  margin-top: 10vh !important;
  max-height: calc(100% - 120px);
}
.el-dialog {
  display: flex;
  flex-direction: column;
}
.el-dialog .el-dialog__body {
  overflow: auto;
}
.basicInfo {
  width: 99%;
  margin: 0 auto;
  padding-left: 20px;
}
.required::before{
  content: "*";
  display: inline-block;
  color: #f56c6c;
  margin-right: 4px;
}
.btnArr{
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
  margin-bottom: 5px;
}
</style>
